// 电影管理

import React from 'react';
import { useEffect, useState, useRef } from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Button, Table, Tag, Space, message } from 'antd';

// 01-引入页头组件
import Pageheader from '@/components/Pageheader';
// 02-引入分页组件
import Mypagniation from '@/components/Mypagniation';
// 03-引入接口
import { getFilm } from '@/api/film'

const Index = () => {
    const { Search } = Input;
    //  定义各种数据
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const [filmList, setFilmList] = useState('')
    const [keyword,setkeyword] = useState('')
    // 定义表格列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电影院',
            dataIndex: 'name',
            key: 'id',
        },
        {
            title: '所在城市',
            dataIndex: 'city_name',
            key: 'id',
        },
        {
            title: '所在区',
            dataIndex: 'district_name',
            key: 'id',
        },
        {
            title: '具体地址',
            dataIndex: 'address',
            key: 'id',
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                // tags就是该列数据对象中对应gender的value值
                return <Tag color={tags == 0 ? 'success' : 'error'}>
                    {tags == 0 ? '正常营业' : '暂停营业'}
                </Tag>
            }
        }
    ];
    // 设置依赖项,两个中不管哪个发生变化，都重新执行
    useEffect(() => {
        getState({ page,keyword })
    }, [page,keyword]);

    // 请求数据
    const getState = (i) => {
        getFilm(i).then(res => {
            setFilmList(res.data.paginate.data)
            setTotal(res.data.paginate.total)
        })
    }
    // 点击搜索后，修改keyword
    const onSearch = (value) =>{
        setkeyword(value)
    }
    return (
        <div>
            {/* 页头标签 */}
            <Pageheader title='电影列表'>
                <Search placeholder="请输入影院名" onSearch={onSearch} enterButton style={{ width: 200 }} />
            </Pageheader>
            {/* 展示表格数据 */}
            <Table
                columns={columns}  //表格列
                pagination={false}   //分页器，false时不展示和进行默认的分页样式
                dataSource={filmList}   //数据数组
                rowKey={(record) => record.id}  //表格行key的取值
            />
            {/* 分页组件 */}
            <Mypagniation page={page} total={total} setPage={setPage}></Mypagniation>
        </div>
    );
}



export default Index;